import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-attr-direct',
    templateUrl: './attr-direct.component.html',
    styleUrls: ['./attr-direct.component.less']
})
export class AttrDirectComponent implements OnInit {

    str = "组件变量";
    arr = [1,2,3];
    user = {
        name:"Tom",
        age:23
    }
    arg1 = null;
    arg2 = undefined;
    flag = true;
    src = null;
    classStr = "bcColor fc bc fs ";
    classArr = [ "bcColor","fc","bc","fs"];
    classObj = {
        // key:value
        fc:false,
        border:true,
        bc:false,
        fs:true
    }

    styleObj = {
        color:"red",
        "background-color":"#ccc",
        fontSize:"20px"
    }
 
    constructor() { }

    ngOnInit() {
    }
    removeBc1(){
        // 删除字符串中的bc样式
        this.classStr = this.classStr.replace("bc","");
    }
    addBorder1(){
        this.classStr += "border ";
    }
    removeBc2(){
        let i = this.classArr.indexOf("bc");
        // console.log(i);
        this.classArr.splice(i,1);
    }
    addBorder2(){
        this.classArr.push("border");
    }
    changeColor(){
        let i = this.classArr.indexOf("fc");
        if(i==-1){
            this.classArr.push("fc");
        }else{
            this.classArr.splice(i,1);
        }
    }
}
